<template>
  <a-card :style="{ marginBottom: '24px' }">
    <a-tabs type="card" default-active-key="1">
      <a-tab-pane key="1" tab="会计算法">
        <div class="flex">
          <p>
            时间筛选：
            <a-range-picker
              :placeholder="['开始月份', '结束月份']"
              format="YYYY-MM"
              :value="dateRange1"
              :mode="mode1"
              @panelChange="handlePanelChange1"
              @change="handleChange1"
            />
          </p>
          <a-button type="primary" @click="search">查询</a-button>
        </div>
        <div class="flex justify-between">
          <div>利息总金额：{{ minMoney(accountInterests) }}</div>
          <div>贷款限额费总金额：{{ minMoney(accountIimitFees) }}</div>
          <div>单位：NZD</div>
        </div>
        <br />
        <a-table rowKey="month" :columns="accountColumns" :data-source="accountData" :pagination="pagination">
          <span slot="interests" slot-scope="interests">{{ minMoney(interests) }}</span>
          <span slot="limitFees" slot-scope="limitFees">{{ minMoney(limitFees) }}</span>
          <span slot="opr" slot-scope="_, record">
            <SingleMonth :record="record" />
          </span>
          <!-- <a-table
            rowKey="day"
            slot="expandedRowRender"
            slot-scope="record"
            :columns="innerColumns"
            :data-source="record.innerData"
            :pagination="pagination"
          >
            <span slot="interests" slot-scope="interests">{{ minMoney(interests) }}</span>
            <span slot="limitFees" slot-scope="limitFees">{{ minMoney(limitFees) }}</span>
          </a-table> -->
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="现金算法">
        <div class="flex">
          <p>
            时间筛选：
            <a-range-picker
              :placeholder="['开始月份', '结束月份']"
              format="YYYY-MM"
              :value="dateRange2"
              :mode="mode2"
              @panelChange="handlePanelChange2"
              @change="handleChange2"
            />
          </p>
          <a-button type="primary" @click="search">查询</a-button>
        </div>
        <div class="flex justify-between">
          <div>利息总金额：{{ minMoney(interests) }}</div>
          <div>贷款限额费总金额：{{ minMoney(limitFees) }}</div>
          <div>单位：NZD</div>
        </div>
        <br />
        <a-table rowKey="month" :columns="accountColumns" :data-source="moneyData" :pagination="pagination">
          <span slot="interests" slot-scope="interests">{{ minMoney(interests) }}</span>
          <span slot="limitFees" slot-scope="limitFees">{{ minMoney(limitFees) }}</span>
          <span slot="opr" slot-scope="_, record">
            <SingleMonth :record="record" />
          </span>
          <!-- <a-table
            rowKey="day"
            slot="expandedRowRender"
            slot-scope="record"
            :columns="innerColumns"
            :data-source="record.innerData"
            :pagination="pagination"
          >
            <span slot="interests" slot-scope="interests">{{ minMoney(interests) }}</span>
            <span slot="limitFees" slot-scope="limitFees">{{ minMoney(limitFees) }}</span>
          </a-table>-->
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
import { getAlgorithm } from '@/api/common'
export default {
  name: 'Calc',
  components: {},
  props: [''],
  data() {
    return {
      dateRange1: [],
      mode1: ['month', 'month'],
      dateRange2: [],
      mode2: ['month', 'month'],
      accountInterests: '',
      accountIimitFees: '',
      interests: '',
      limitFees: '',
      accountColumns: [
        {
          title: '月份',
          dataIndex: 'month',
          key: 'month'
        },
        {
          title: '利息',
          dataIndex: 'interests',
          key: 'interests',
          scopedSlots: { customRender: 'interests' }
        },
        {
          title: '贷款限额费',
          dataIndex: 'limitFees',
          key: 'limitFees',
          scopedSlots: { customRender: 'limitFees' }
        },
        {
          title: '操作',
          dataIndex: 'opr',
          key: 'opr',
          scopedSlots: { customRender: 'opr' }
        }
      ],
      innerColumns: [
        {
          title: '日期',
          dataIndex: 'day',
          key: 'day'
        },
        {
          title: '利息',
          dataIndex: 'interests',
          key: 'interests',
          scopedSlots: { customRender: 'interests' }
        },
        {
          title: '贷款限额费',
          dataIndex: 'limitFees',
          key: 'limitFees',
          scopedSlots: { customRender: 'limitFees' }
        }
      ],
      accountData: [],
      moneyData: [],
      pagination: {
        // total: 1,
        pageSize: 5
        // onChange: this.getAccount
      }
    }
  },
  mounted() {
    this.init()
  },
  components: {
    SingleMonth: () => import('./com/singleMonth.vue')
  },
  methods: {
    async init() {
      await this.getAccount()
      await this.getMoney()
    },
    handlePanelChange1(value, mode) {
      this.dateRange1 = value
      this.mode1 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
    },
    async handleChange1(value) {
      this.dateRange1 = value
    },
    async search() {
      await this.getAccount()
    },
    handlePanelChange2(value, mode) {
      this.dateRange2 = value
      this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
    },
    async handleChange2(value) {
      this.dateRange2 = value
    },
    minMoney(v) {
      v = Number(v).toFixed(2)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    async getAccount() {
      const form = {
        algorithmType: 1
      }
      if (this.dateRange1[0]) {
        form.startDate = Number(this.dateRange1[0].startOf('month').format('X'))
        form.endDate = Number(
          this.dateRange1[1]
            .startOf('month')
            .subtract(1, 'days')
            .format('X')
        )
      }
      const res = await getAlgorithm(form)
      const data = res.result.data
      const colmuns = []
      this.accountIimitFees = 0
      this.accountInterests = 0
      const keys = Object.keys(data).sort()
      for (let key of keys) {
        let interests = 0
        let limitFees = 0
        const crrt = data[key]
        const crrtKeys = Object.keys(data[key]).sort()
        const innerData = []
        for (let day of crrtKeys) {
          innerData.push({
            day: day,
            interests: crrt[day].interests,
            limitFees: crrt[day].limitFees
          })
          interests += crrt[day].interests
          limitFees += crrt[day].limitFees
        }
        colmuns.push({
          month: key,
          interests: interests,
          limitFees: limitFees,
          innerData
        })
        this.accountInterests += interests
        this.accountIimitFees += limitFees
        this.accountData = colmuns
      }
    },
    async getMoney() {
      const form = {
        algorithmType: 2
      }
      if (this.dateRange2[0]) {
        form.startDate = Number(this.dateRange2[0].startOf('day').format('X'))
        form.endDate = Number(this.dateRange2[1].endOf('day').format('X'))
      }
      const res = await getAlgorithm(form)
      const data = res.result.data
      const colmuns = []
      this.interests = 0
      this.limitFees = 0
      for (let key in data) {
        let interests = 0
        let limitFees = 0
        const crrt = data[key]
        const innerData = []
        for (let day in crrt) {
          innerData.push({
            day: day,
            interests: crrt[day].interests,
            limitFees: crrt[day].limitFees
          })
          interests += crrt[day].interests
          limitFees += crrt[day].limitFees
        }
        colmuns.push({
          month: key,
          interests: interests,
          limitFees: limitFees,
          innerData
        })
        this.interests += interests
        this.limitFees += limitFees
        this.moneyData = colmuns
      }
    }
  }
}
</script>
<style lang="css" scoped></style>
